import { Component, useState } from "react";

class Counter extends Component {
    // 定义状态变量
    state={
        count:0
    }
    // 组件渲染时执行，通常用于发送网络请求
    componentDidMount(){
        console.log('组件被渲染')
        // 开启定时器
        this.timer=setInterval(()=>{
            console.log('I am timer')
        },1000)
    }
    // 组件被卸载时执行，通常用于清除副作用、定时器、事件绑定
    componentWillUnmount(){
        console.log('组件被卸载')
        clearInterval(this.timer)
    }
    // 组件被更新时执行
    componentDidUpdate(){
        console.log('组件被更新')
    }

    // 定义事件回调修改状态数据
    setCount=()=>{
        // 修改状态数据
        this.setState({
            count:this.state.count+1
        })
    }

    render(){
        return(
            <div>
                <button onClick={this.setCount}>{this.state.count}</button>
            </div>
        )
    }

}

const ClassAPI=()=>{
    const [show,setShow]=useState(true)
    return(
        <div>
            {true && <Counter></Counter>}
            <button onClick={()=>setShow(!show)}>show</button>
        </div>
    )
}
export default ClassAPI